<template>
	
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>
    export default {
        name: 'Echarts',
        mounted(){
			let _this=this
			axios.get('http://localhost:8181/fruit/pievo').then(function (response){
				// 基于准备好的dom，初始化echarts实例
				            let myChart = _this.$echarts.init(document.getElementById('myChart'))
				            // 绘制图表
				            myChart.setOption({
				    backgroundColor: '#2c343c',
				
				    title: {
				        text: '水果销量图',
				        left: 'center',
				        top: 20,
				        textStyle: {
				            color: '#ccc'
				        }
				    },
				
				    tooltip: {
				        trigger: 'item'
				    },
				
				    visualMap: {
				        show: false,
				        min: 80,
				        max: 600,
				        inRange: {
				            colorLightness: [0, 1]
				        }
				    },
				    series: [
				        {
				            name: '访问来源',
				            type: 'pie',
				            radius: '55%',
				            center: ['50%', '50%'],
				            data: response.data.sort(function (a, b) { return a.value - b.value; }),
				            roseType: 'radius',
				            label: {
				                color: 'rgba(255, 182, 193, 0.3)'
				            },
				            labelLine: {
				                lineStyle: {
				                    color: 'rgba(222, 255, 255, 0.3)'
				                },
				                smooth: 0.2,
				                length: 10,
				                length2: 20
				            },
				            itemStyle: {
				                color: '#c23531',
				                shadowBlur: 200,
				                shadowColor: 'rgba(234, 0, 0, 0.5)'
				            },
				
				            animationType: 'scale',
				            animationEasing: 'elasticOut',
				            animationDelay: function (idx) {
				                return Math.random() * 200;
				            }
				        }
				    ]
				});
			})
            
        }
    }
</script>